<template>
  <!-- <main-view /> -->
  <div>
    <h1>{{ t('btn.text') }}</h1>
    <p>{{ t('common.text') }}</p>
    <button @click="toggleLocales()">切换语言</button>
  </div>
</template>

<script setup lang="ts">
const { t, availableLocales, locale } = useI18n();

const toggleLocales = () => {
  const locales = availableLocales;
  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length];
};
</script>

<style scoped></style>
